<template>
	<div class="addCallAgentId-container">
		<el-dialog
			title="通话坐席ID添加"
			:visible.sync="showAddCallAgentId"
			width="390px"
			:show-close="false"
			custom-class="addCallAgentId-content"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<div class="callAgentId-mark-video-box">
				<p class="callAgentId-no" :class="radio" v-show="radio">A001</p>
				<div class="black-box">
					<!-- <img src="@/assets/img/callWatermarkAdd.png" alt="" /> -->
				</div>
			</div>
			<div class="radio-box">
				<p>坐席ID展示位置：</p>
				<el-radio-group v-model="radio" @change="changeRadio(radio)">
					<div>
						<el-radio :label="'nw'">左上方</el-radio>
						<el-radio :label="'n'">正上方</el-radio>
						<el-radio :label="'ne'">右上方</el-radio>
					</div>
					<div style="margin-top: 10px">
						<el-radio :label="'sw'">左下方</el-radio>
						<el-radio :label="'s'">正下方</el-radio>
						<el-radio :label="'se'">右下方</el-radio>
					</div>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelAddCallAgentId">取 消</el-button>
				<el-button type="primary" @click="saveAddCallAgentId" style="background: #6384fe">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		showAddCallAgentId: {
			type: Boolean,
			required: true,
			default: () => false
		},
		addCallRadio: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			radio: ''
		};
	},
	mounted() {
		this.radio = this.addCallRadio;
		// this.radio = 'nw';
	},
	methods: {
		cancelAddCallAgentId() {
			this.$emit('cancelAddCallAgentId');
		},
		saveAddCallAgentId() {
			let data = { value: { position: this.radio, side: 1 } };
			this.$emit('saveAddCallAgentId', data);
		},
		changeRadio(value) {
			console.log(value);
		}
	}
};
</script>

<style lang="less" scoped>
.addCallAgentId-container {
	.callAgentId-mark-video-box {
		margin-top: -10px;
		.black-box {
			background: url('../../assets/img/callWatermarkAdd.png') no-repeat;
			width: 190px;
			height: 250px;
			border-radius: 6px;
		}
	}
	.callAgentId-mark-video-box {
		position: relative;
		border-radius: 8px;
		overflow: hidden;
		// width: 320px;
		// height: 380px;
	}
	.radio-box {
		color: #333;
		p {
			padding: 15px 0;
		}
	}
	.text {
		color: #333;
	}
	.callAgentId-no {
		position: absolute;
		color: #fff;
		z-index: 100;
	}
	.nw {
		top: 10px;
		left: 10px;
	}
	.n {
		top: 10px;
		left: 18%;
		transform: translateX(-50%);
	}
	.ne {
		left: 29%;
		top: 10px;
	}
	.sw {
		left: 10px;
		bottom: 40px;
	}
	.s {
		bottom: 40px;
		left: 18%;
		transform: translateX(-50%);
	}
	.se {
		left: 29%;
		bottom: 40px;
	}
}
</style>
<style lang="less">
.addCallAgentId-content {
	padding: 0;
	.el-dialog__body {
		border-top: 1px solid #eee;
	}
}
</style>
